// 监测预警

const EaryWaring = {
    template: '#EaryWaring',
    props: ['currenType', 'cityName'],
    components: {
        SelectDate
    },
    data() {
        return {
            line1: null,//趋势分析
            line2: null,//预警处理响应时间分析
            line3: null,//预警分布
            currentDateType: '1',//日月年1 2 3趋势分析
            currentDateType2: '1',//日月年1 2 3预警处理响应时间分析
            currentDateType3: '1'//日月年1 2 3预警分布

        }
    },
    mounted() {
        this.init()
    },
    methods: {
        handleChangeDate(type) {
            this.currentDateType = type
            this.setLine1()
        },
        handleChangeDate2(type) {
            this.currentDateType2 = type
            this.setLine2()
        },
        handleChangeDate3(type) {
            this.currentDateType3 = type
            this.setLine3()
        },
        init() {
            this.setLine1()
            this.setLine2()
            this.setLine3()
        },
        setLine1() {
            service.get('/mock.json', {
                params: {
                    type: this.currentDateType,
                    currenType: this.currenType,
                    cityName: this.cityName

                }
            }).then(res => {
                if (res.status === 200) {
                    // let { data } = res
                    let legName = []
                    let xData = ["城市1", "城市1", "城市1", "城市1", "城市1", "城市1", "城市1", "城市1", "城市1", "城市1", "城市1",
                        "城市1", "城市1", "城市1"
                    ]
                    let data = [
                        { name: '红色预警', value: [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 32] },
                        { name: '橙色预警', value: [320, 02, 301, 334, Math.floor(Math.random() * 1000), 330, Math.floor(Math.random() * 1000), 320, 302, 301, 334, 390, 330, 32] }
                    ]
                    let serList = data.map(item => {
                        legName.push(item.name)
                        return (
                            {
                                name: item.name,
                                type: "line",
                                data: item.value
                            }
                        )
                    })
                    this.line1 = echarts.init(document.getElementById('jcyj-line1'));
                    let option = allEchartsOption.jcyjline1;
                    option.legend.data = legName
                    option.xAxis.data = xData
                    option.series = serList

                    this.line1.setOption(option)
                }
            })
        },
        setLine2() {
            service.get('/mock.json', {
                params: {
                    type: this.currentDateType2,
                    currenType: this.currenType,
                    cityName: this.cityName

                }
            }).then(res => {
                if (res.status === 200) {
                    // let { data } = res
                    let legName = []
                    let xData = ["1月", "城市1", "1月", "1月", "1月", "1月", "1月", "1月", "1月", "1月", "1月",
                        "城市1", "1月", "1月"
                    ]
                    let data = [
                        { name: '平均处理时间', value: [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 32] },
                        { name: '最长处理时间', value: [320, 02, 301, 334, Math.floor(Math.random() * 1000), 330, Math.floor(Math.random() * 1000), 320, 302, 301, 334, 390, 330, 32] }
                    ]
                    let serList = data.map(item => {
                        legName.push(item.name)
                        return (
                            {
                                name: item.name,
                                type: "line",
                                data: item.value
                            }
                        )
                    })
                    this.line2 = echarts.init(document.getElementById('jcyj-line2'));
                    let option = allEchartsOption.jcyjline2;
                    option.legend.data = legName
                    option.xAxis.data = xData
                    option.series = serList
                    this.line2.setOption(option)
                }
            })
        },
        setLine3() {
            service.get('/mock.json', {
                params: {
                    type: this.currentDateType3,
                    currenType: this.currenType,
                    cityName: this.cityName

                }
            }).then(res => {
                if (res.status === 200) {
                    // let { data } = res
                    let legName = []
                    let xData = ["1月", "城市1", "1月", "1月", "1月", "1月", "1月", "1月", "1月", "1月", "1月",
                        "城市1", "1月", "1月"
                    ]
                    let data = [
                        { name: '红色预警', value: [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 32] },
                        { name: '橙色预警', value: [320, 02, 301, 334, Math.floor(Math.random() * 1000), 330, Math.floor(Math.random() * 1000), 320, 302, 301, 334, 390, 330, 32] },
                        { name: '平均处理时间', value: [Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100)] },
                        { name: '最长处理时间', value: [Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100)] }

                    ]
                    let serList = data.map(item => {
                        legName.push(item.name)
                        if (item.name === '平均处理时间' || item.name === '最长处理时间') {
                            return (
                                {
                                    name: item.name,
                                    xAxisIndex: 1,
                                    type: "line",
                                    data: item.value
                                }
                            )
                        }
                        return (
                            {
                                name: item.name,
                                type: "bar",
                                data: item.value
                            }
                        )
                    })
                    this.line3 = echarts.init(document.getElementById('jcyj-line3'));
                    let option = allEchartsOption.jcyjBarLine;
                    option.legend.data = legName
                    option.xAxis.data = xData
                    option.series = serList
                    this.line3.setOption(option)
                }
            })
        }
    },
    watch: {
        currenType(newValue, oldValue) {
            // 类型改变后一系列动作
            this.init()

        },
        cityName(newValue, oldValue) {
            // 城市改变后一系列动作
            this.init()
        }
    }
}